<template>
	<view id="productsPage">
		<view class="header">
			<view class="header-img" @click="toLibary">
				<image src="../../static/img/prod.png" mode="aspectFill" class="prod-ico"></image>
			</view>
			<view class="search-wrapper">
				<input type="text" class="srh-inp" placeholder="请输入产品名称"/>
				<image src="../../static/img/search.png" class="srh-ico" mode="aspectFill"></image>
			</view>
			<view class="header-img">
				<image src="../../static/img/sister.png" mode="aspectFill" class="sister-ico"></image>
			</view>
		</view>
		<view class="list" v-if="true" key="have">
			<view class="item" v-for="item in list" :key="item" @click="toDetail">
				<image src="../../static/img/rope.png" mode="aspectFill" class="rope"></image>
				<view class="name">
					A580进口高速防滑...
				</view>
				<view class="desc">
					尺寸:4120(mm)，材质:橡胶...
				</view>
				<view class="footer">
					<view class="price">
						<text class="unit">￥</text> 299.00
					</view>
					<!-- <image @click="openModal(item)" class="pru-cart" src="../../static/img/pru-cart.png" mode="aspectFill"></image> -->
					<image class="pru-cart" src="../../static/img/pru-cart.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<view class="list list-null" v-else key="none">
			<image src="../../static/img/null.png" mode="aspectFill" class="null"></image>
			<view class="null-txt">
				没有搜索结果
			</view>
		</view>
		<view class="operation-modal" v-show="modalVisable">
			<view class="operation-dialog">
				<view class="operation-box">
					<view class="pic-box">
						<image class="pic-img" src="../../static/img/cart-img.png" mode="aspectFill"></image>
					</view>
					<view class="intro-box">
						<view class="intro-tit">
							A580进口高速防滑传动带
						</view>
						<view class="intro-cost">
							<text class="prefix">￥</text> 299.00
						</view>
						<image src="../../static/img/close.png" mode="aspectFill" class="intro-close" @click="close"></image>
					</view>
				</view>
				<view class="count-wrapper">
					<view class="count-label">
						请选择数量
					</view>
					<uni-number-box class="count-nums" :min="1" :max="9999" @change="numChange"></uni-number-box>
				</view>
				<view class="operation-footer">
					<view class="operation-join join">
						加入购物车
					</view>
					<view class="operation-buy buy">
						立即购买
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniNumberBox from "@/components/uni-number-box/uni-number-box.vue"
	export default {
		components: {uniNumberBox},
		data() {
			return {
				list: 12,
				modalVisable: false
			}
		},
		methods: {
			toLibary() {
				uni.navigateTo({
					url: '../libary/libary',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			toDetail() {
				uni.navigateTo({
					url: '../prodDetail/prodDetail'
				})
			},
			openModal(id) {
				this.modalVisable = true
			},
			numChange() {
				
			},
			close() {
				this.modalVisable = false
			}
		}
	}
</script>

<style>
.header {
	height: 120upx;
	background: #FFFFFF;
	position: sticky;
	top: 0;
	left: 0;
	width: 750upx;
	display: flex;
}
.header-img {
	flex: 1 108upx 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 108upx;
}
.prod-ico {
	width: 44upx;
	height: 42upx;
}
.search-wrapper {
	width: 534upx;
	flex: 6 534upx 0;
	height:74upx;
	background:rgba(255,255,255,1);
	border:4upx solid rgba(234,10,42,1);
	border-radius:37upx;
	position: relative;
	margin: 24upx auto 0;
	display: flex;
	align-items: center;
}
.srh-inp {
	width: 400upx;
	padding-left: 30upx;
	line-height: 74upx;
}
.srh-ico {
	width: 32upx;
	height: 36upx;
	position: absolute;
	top: 19upx;
	right: 41upx;
}
.sister-ico {
	width: 57upx;
	height: 48upx;
}
.list {
	background: #F7F7F7;
	padding-left: 2upx;
	position: absolute;
	top: 120upx;
	left: 0;
	right: 0;
	bottom: 0;
	overflow-y: auto;
}
.item {
	display: inline-block;
	width: 340upx;
	margin: 24upx 0 0 22upx;
	background: #FFFFFF;
} 
.rope {
	width: 340upx;
	height: 340upx;
	display: block;
	
}
.name {
	width:276upx;
	font-size:30upx;
	font-weight:500;
	color:rgba(51,51,51,1);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin: 14upx auto 0;
}
.desc {
	font-size:24upx;
	font-weight:500;
	color:rgba(153,153,153,1);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin: 13upx auto 0;
	width: 310upx;
}
.footer {
	display: flex;
	justify-content: space-between;
	margin: 8upx 22upx 29upx 13upx;
	color: #EA0A2A;
	font-size: 34upx;
}
.unit {
	font-size: 24upx;
}
.pru-cart {
	width: 49upx;
	height: 47upx;
}
.operation-join.join {
	flex: 1;
	width: 50%;
}
.operation-buy.buy{
	flex: 1;
	width: 50%;
}


</style>
